<template>
  <view class="Border">
    <view class="Border_left">
      <view class="Border_left_img" @click="ontab(text)">
        <u-image :src="img_" width="44rpx" height="44rpx"></u-image>
      </view>
      <view class="coolect" :class="text === '已收藏' && 'actvie'">{{ text }}</view>
    </view>
    <view class="Border_btn">
      立即下单
    </view>
  </view>
</template>
<script setup  lang="ts">
import { ref } from 'vue'
import img from '@/static/tabs/collect.png'
import imgs from '@/static/tabs/collects.png'
const img_ = ref<string>('')
const text = ref<string>('收藏')
img_.value = img
function ontab(node) {
  if (node === '收藏') {
    text.value = '已收藏'
    img_.value = imgs
  } else {
    text.value = '收藏',
      img_.value = img
  }
}
</script>
<style scoped  lang="scss">
@import './Boder.scss'
</style>